<template>
  <ElDatePicker
    v-model.trim="data.value"
    v-on="listens"
    v-bind="$attrs"
    :format="formatter.format"
    :value-format="formatter.format"
    :placeholder="formatter.label"
    :clearable="false"
  />
</template>

<script lang="ts">
import { defineComponent, PropType, toRef } from 'vue'
import { Widget } from '@/models'
import useDateFormat from './useDateFormat'

/** 日期填写控件 */
export default defineComponent({
  name: 'FaWidgetDateFill',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 监听 */
    listens: {
      type: Object as PropType<Record<string, (...rest: any[]) => void>>
    }
  },

  setup(props) {
    const data = toRef(props, 'data')

    return {
      formatter: useDateFormat(data)
    }
  }
})
</script>

<style lang="scss">
.fa-widget-date-fill .el-date-editor.el-input {
  width: 100%;

  .el-input__inner {
    height: 100%;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    text-align: inherit;
    background: transparent;
    border: none;
  }

  .el-input__prefix {
    display: none;
  }
}
</style>
